<template>
	<view class="themeItem">
		<navigator :url="'/pages/classList/classList?id='+item._id+'&name='+item.name" class="box" v-if="!isMore">
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask">{{item.name}}</view>
			<view class="tab">{{compareTimestamp(item.updateTime)}}前更新</view>
			
		</navigator>
		<navigator url="/pages/classfy/classfy" open-type="reLaunch" class="box more" v-if="isMore">
			<image class="pic" src="../../common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask"><uni-icons type="bars" color='white' size="34"></uni-icons>
			<view class="text">更多</view></view>
			
			
		</navigator>
	</view>
</template>


<script setup>
import{compareTimestamp} from "@/utils/common.js"
defineProps({
	isMore:{
		type:Boolean,
		default:false
	},
	item:{
		
		type:Object,
		default(){
			return{
				name:"分类名称",
				picurl:"../../common/images/classify1.jpg",
				updateTime:"",
				}
		}
	}
})
</script>

<style lang="scss" scoped>
	.themeItem{
		.box  {
			height: 340rpx;
			border-radius: 10rpx;
			overflow: hidden;
			
			position: relative;
			.pic{
				width:100%;
				height:100%;
			}
			.mask{
				width:100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.2);
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
backdrop-filter: blur(20rpx);
			font-weight: 600;
				
			}
			.tab{
				position: absolute;
				top: 0;
				left: 0;
			// background: rgba(0,0,0,0.2);
			background: orange;
			backdrop-filter: blur(20rpx);
			color: white;
			font-size: 22rpx;
			padding: 6rpx 14rpx;
			// border-radius: ;
			}
		}
		.box.more{
			.mask{
				width:100%;
				height:100%;
			}
			.text{
				font-size: 28rpx;
			}
		
		}
	}

</style>